<extend name="default/template/mybase" />
<block name="area_header">
<style>
body{padding-top: 20px;padding-bottom: 20px;}
ul,li{list-style: none;}.address{display: none;}
.price{border-bottom: 1px #ddd solid;padding-bottom: 1rem;margin-bottom: 1rem;}
.am-table{padding-left: 2em !important;}
td{padding-left: 0!important;padding-right: 0!important;}
strong{color:#f37b1d;font-weight: normal;}
.am-modal .table tr:first-child td{border-top:none;}
.am-modal {
  width: 80%;
  position: fixed;
  display: block !important;
  z-index: 1110;
  /*max-height: 500px;*/
  text-align: center;
  border-radius: 0;
  opacity: 0;
  transition: all .5s;
  left: -90%;
  top: 20%;
  transition:left .2s;
}
.am-modal-btn{color:#f37b1d;}
.am-modal:focus {  outline: 0;}
.am-modal.am-modal-active {  left:50%;opacity: 1;}
.am-modal-dialog {  background: #f8f8f8;}
.am-modal-hd{height: 20px;}
.am-modal-bd {
  padding: 0 10px;
  height: 100%;
  text-align: center;
  overflow-y:scroll;
  position: relative;
  border-bottom: 1px solid #dedede;
}
</style>
    <!--script src="http://cdn.bootcss.com/jquery.form/3.51/jquery.form.min.js"></script-->
</block>
<block name="area_body">
<div class="body am-container">
	<!-- <img src="{$entry.path}" alt="" width="100%"> -->
	<div class="th">您已成功兑换<strong>{$exchange.pname}</strong></div>
	<div class="price"><neq name="exchange.price" value="0">还需付款<strong>{$exchange.price}</strong>元<else /></neq></div>
	<div class="bd">
		<div>请选择收货地址</div>
		<ul class="addressList">
			<empty name="address">您还没有收货地址<else/>
				<volist name="address" id="v">
				<li>
					<label class="am-radio am-warning">
		      <input type="radio" name="radio1" value="{$v.id}" {$aid==$v['id']?'checked ':''} data-am-ucheck>
		      {$v.province}.{$v.city}.{$v.area}.{$v.detailinfo}-{$v.postal_code}-{$v.contactname}-{$v.mobile}
		    	</label>
		    </li>
				</volist>
			</empty>
			<li id='addrnew'>
				<label class="am-radio am-warning">
		      <input type="radio"  name="radio1" value=""  data-am-ucheck><span class="text">使用新地址</span>
		    </label>
	    </li>
		</ul>
<div class="address list-block">
<form id="addressFrom" name="addressForm" action="" method="post">
	<table class="am-table">
    <tbody>
        <tr>{__TOKEN__}
            <td colspan=3> <label><span>*</span>地区选择：</label></td>
        </tr>
        <tr>
          <td colspan=3><div class="div">
	    	<select  name="info[catid][0]" class="catid ipt1" data-id='0' id="catid0">
	    		<option value="">请选择</option>
	    	<volist name="topCats" id="v">
	    		<option value="{$v.provinceid}">{$v.province}</option>
	    	</volist>
	    	</select>
	    </div></td>
        </tr>
        <tr>
        	<td>详细地址</td>
        	<td colspan=2><input type="text" name="detail" id="detail" value="">
        	</td>
        </tr>
        <tr>
        	<td>邮编</td>
        	<td colspan=2><input type="text" name="postal_code" id="postal_code" value="">
        	</td>
        </tr>
        <tr>
        	<td>联系人</td>
        	<td colspan=2><input type="text" name="contactname" id="contactname" value="">
        	</td>
        </tr>
        <tr>
        	<td>手机号码</td>
        	<td colspan=2><input type="text" name="mobile" id="mobile" value="">
        	</td>
        </tr>
        <tr>
        	<td colspan=3><div  data-url="{:U('ScoreGoods/addressadd',array('uid'=>$uid,'psw'=>$psw))}" data-form="addressForm" class="am-btn am-btn-xs am-radius am-btn-warning" id="addressbtn"/>使用并保存此地址</div>
        	</td>
        </tr>
    </tbody>
</table>
</div>
</form>
</div>
<neq name="exchange.price" value="0">
<button data-tar="{$payurl}" data-url="{:U('ScoreGoods/addressset',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" class="am-btn am-btn-sm am-radius am-btn-warning exchange">前去付款</button>
<else />
<button data-tar="{:U('ExchangeLog/detail',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" data-url="{:U('ScoreGoods/addressset',array('uid'=>$uid,'psw'=>$psw,'id'=>$id))}" class="am-btn am-btn-sm am-radius am-btn-warning exchange">确定此地址</button></neq>
</div>
<!-- alert -->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd"></div>
    <div class="am-modal-bd"></div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>
<!-- alert end -->
</block>

<block name="area_footer">
<script>
function myalert(con,ele){
  if(!ele) ele='my-alert';
  if(!con) con='此地无银';
  $('#'+ele).addClass('am-modal-active').find('.am-modal-bd').html(con);
}
$(function(){
  $('.am-modal-btn').click(function(){
      $('.am-modal').removeClass('am-modal-active');
  });

  $('.exchange').click(function(){
    // alert();
    var s= $('input[name="radio1"]:checked').val();
    if(!s){myalert('请选择收货地址');return false;}
    // if(!confirm('确定使用此地址发货吗？')){return false;}
    var url = $(this).data('url');
    var tar = $(this).data('tar');
    $.ajaxSettings.async = false;
    $.getJSON(url,{ 'addressid': s },function(data){
      if(!data.status){
        myalert('服务器返回错误');
      }else{
        // myalert(tar);
        self.location = tar;
      }
    });
  });
  $('#addrnew').on('click',function(){
  	// alert('show');
  	$(this).find('input').uCheck('check');
		$('.address').show();
  });//.on('blur',function(){
  // 	alert('hide');
  // });
  $(".addressList>li:not('#addrnew')").on('click',function(){
		$('.address').hide();
		$('#addrnew input').uCheck('uncheck');
  	$(this).find('input').uCheck('check');
  });
  $('#addressbtn').on('click', function() {
  	// oMyForm.append("username", "Groucho");
  	var url = $(this).data('url');
    var fd = new FormData();
		fd.append("provinceid",$('select#catid0 option:selected').val());
		fd.append("province",$('select#catid0 option:selected').text());
		fd.append("cityid",$('select#catid1 option:selected').val());
		fd.append("city",$('select#catid1 option:selected').text());
		fd.append("areaid",$('select#catid2 option:selected').val());
		fd.append("area",$('select#catid2 option:selected').text());
		fd.append("detailinfo",$('input#detail').val());
		fd.append("postal_code",$('input#postal_code').val());
		fd.append("mobile",$('input#mobile').val());
		fd.append("contactname",$('input#contactname').val());
		$.ajax({
		  url: url
		  ,type: "POST"
		  ,data: fd
		  ,cache:false
		  ,dataType:'json'
		  ,processData: false  // 告诉jQuery不要去处理发送的数据
		  ,contentType: false   // 告诉jQuery不要去设置Content-Type请求头
		  ,success:function(data){
		  	if(!data.status){myalert(data.info);return;}
		  	data = data.info;
		  	var html = data.province+data.city+data.area+data.detailinfo+'-'+data.postal_code+'-'+data.contactname+'-'+data.mobile;
		  	// console.log(data.info);
		  	$('#addrnew label').find('span.text').remove();
		  	$('#addrnew label').append(html).find('input').val(data.id);
		  	$('.address').remove();
		  }
		  ,error:function(msg){
        // console.log(msg);
		  	myalert(msg.responseText);
		  }
		});
    return false;
  });

  $(document).on('change','.catid',function(event) {
    var $this = $(this),cid = $this.val(),id = $this.data('id')+1;
    $.getJSON("{:U('ScoreGoods/getArea',array('uid'=>$uid,'psw'=>$psw))}",{ cid:cid,type:id },function(data){
    		// console.log(data);return;
        var $next = $('#catid'+id);
        if(!data){
            //返回''
            $this.nextAll('select').remove();
          }else{
            //返回json字串
            var cats = data.info;//$.parseJSON(data);
            if($next.length==0){
              //下一级select不存在
              $html = $('<select name="info[catid]['+id+']" class="catid ipt1" data-id="'+id+'" id="catid'+id+'"><option value="">请选择</option></select>');
              if(id===1){
	              $.each(cats,function(k,v){
	                  $html.append('<option value="'+v.cityid+'">'+v.city+'</option>');
	              });
              }else if(id===2){
              	$.each(cats,function(k,v){
	                  $html.append('<option value="'+v.areaID+'">'+v.area+'</option>');
	              });
              }
              $this.after($html);
            }else{
              //下一级select已存在
              $next.html('<option value="">请选择</option>');
              if(id===1){
	              $.each(cats,function(k,v){
	                  $next.append('<option value="'+v.cityid+'">'+v.city+'</option>');
	              });
            	}else if(id===2){
								$.each(cats,function(k,v){
	                  $next.append('<option value="'+v.areaID+'">'+v.area+'</option>');
	              });
            	}
            }
           $next.nextAll("select.catid").remove();
        }
    });
	});
})
</script>
</block>